<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
      <el-rowgut :ter="24">


        <el-col :span="24" class="mb20">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入标题" />
          </el-form-item>
        </el-col>


        <el-col :span="24" class="mb20">
          <el-upload class="upload-demo" drag accept=".pdf" :before-upload="beforeUpload" :file-list="fileList"
            :on-remove="handleRemove">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，<em>或点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                只支持pdf
              </div>
            </template>
          </el-upload>

        </el-col>
      </el-rowgut>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="NoticeDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/homepage/notice'
import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
let uploadFile = ref(false);
let fileList = ref([]);
// 定义字典

// 提交表单数据
const form = reactive({

  title: '',
  file: ''
});

// 定义校验规则
const dataRules = ref({
})

//上传前校验
const beforeUpload = (file) => {
  const isLt2M = file.size / 1024 / 1024 < 10
  if (!isLt2M) {
    useMessage().error('上传图片大小不能超过 10MB！')
    return;
  }
  if (fileList.value.length > 1) {
    useMessage().error('只支持上传一个文件')
    return;
  }

  //这个设置上传多个文件，可根据自己业务情况决定，本文只是上传一个
  /*if(fileList.value.length>5){
      ElMessage.error('只支持5个文件');
      return;
  }*/

  let fd = new FormData()
  fd.append('title', form.title);
  fd.append('file', file);
  addObj(fd).then(res => {
    if (res.code == 0) {
      useMessage().success('提交成功');
    } else {
      useMessage().error('提交失败');
    }
    visible.value = false

  })
  return false;
}
//文件移除配置方法
const handleRemove = (file, files) => {
  fileList.value = files;
}


// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 获取notice信息
  if (id) {
    form.id = id
    getnoticeData(id)
  }
};

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => { });
  if (!valid) return false;

  try {
    loading.value = true;
    form.id ? await putObj(form) : await addObj(form);
    useMessage().success(form.id ? '修改成功' : '添加成功');
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getnoticeData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>